<template>
  <div>
    <div class="pages-certificate" v-if="!sub">
      <div class="head">
        <div class="search-data-box">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待审核" name="first"></el-tab-pane>
            <el-tab-pane label="已通过" name="second"></el-tab-pane>
          </el-tabs>

          <el-row :gutter="15">
            <el-col :span="8">
              <span class="title">用户姓名</span>
              <el-input v-model="searchData.name" size="small" @change="changePage()"></el-input>
            </el-col>
            <el-col :span="8">
              <span class="title">报考内容</span>
              <el-select
                v-model="searchData.certificateType"
                filterable
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in contentOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @change="changePage()"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <span class="title">状态</span>
              <el-select
                v-if="activeName == 'first'"
                v-model="searchData.status"
                filterable
                placeholder="请选择"
                size="small"
                @change="changePage()"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                v-else
                v-model="searchData.status"
                filterable
                placeholder="请选择"
                size="small"
              >
                <el-option key="1" label="已通过" value="1"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-row :gutter="15">
              <el-col :span="8">
                <span class="title">报名时间</span>
                <el-date-picker
                  v-model="searchData.applyTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  @change="changePage()"
                ></el-date-picker>
              </el-col>
              <el-col :span="8">
                <span class="title">服务商    </span>
              <el-input v-model="searchData.serviceProvideName" size="small" @change="changePage()"></el-input>
            </el-col>
              <el-col :span="8">
                <el-button type="primary" size="small" @click="search()">查询</el-button>
                <el-button size="small" @click="resetSearchData()">重置</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="outPut('1,3,4,5')"
                  v-if="activeName == 'second'"
                >导出</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="outPut('0,2')"
                  v-if="activeName == 'first'"
                >导出</el-button>
              </el-col>
            </el-row>
          </el-row>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50" label="序号">
          <template slot-scope="scope">
            <span>{{scope.$index+ pageData.pageSize*(pageData.currentPage -1) +1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户姓名" width="120"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="address" label="通讯地址"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="certificateType" label="报考内容" :formatter="certType"></el-table-column>
        <el-table-column prop="registeTime" label="报名时间" :formatter="trunTime"></el-table-column>
        <el-table-column prop="payAmount" label="支付金额" width="80"></el-table-column>
        <!-- <el-table-column prop="payType" label="支付通道" :formatter="payType"  width="80"></el-table-column> -->
        <el-table-column prop="serviceProvideName" label="服务商"></el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">待审核</span>
            <span v-if="scope.row.status == 1">审核通过</span>
            <span v-if="scope.row.status == 3">审核通过</span>
            <span v-if="scope.row.status == 4">审核通过</span>
            <span v-if="scope.row.status == 5">审核通过</span>
            <span v-if="scope.row.status == 2">审核不通过</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button type="text" @click="toDetail(scope.row.id,scope.row)" size="small">查看</el-button>
            <el-button
              type="text"
              @click="changeStatus(1,scope.row.id)"
              size="small"
              v-if="scope.row.status == 0 || scope.row.status == 2"
            >通过</el-button>
            <el-button
              type="text"
              @click="changeStatus(2,scope.row.id)"
              size="small"
              v-if="scope.row.status == 0"
            >驳回</el-button>
            <el-button
              type="text"
              @click="openUrl(scope.row.profilePicture)"
              size="small"
              v-if="scope.row.status == 0 || scope.row.status == 2"
            >下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <page-unit :pageData="pageData" :func="getList"></page-unit>
    </div>
    <div class="pages-certificate" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
import state from "@/util/state";
import util from "@/util";
import pageUnit from "@/components/Page";
import { trainRegisteLIst, exportTrainRegisteLIst, registerEdit } from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  components: { pageUnit },
  name: "applyList",
  data() {
    return {
      payType: state.cerPayType,
      certType: state.certType,
      activeName: "first",
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      searchData: {
        name: "",
        certificateType: "",
        status: "0,2",
        applyTime: "",
        serviceProvideName:''
      },
      tableData: [],
      contentOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "母婴照护指导"
        }
      ],
      statusOptions: [
        {
          value: "0,2",
          label: "全部"
        },
        {
          value: "0",
          label: "未审核"
        },
        {
          value: "2",
          label: "未通过"
        }
      ],
      tabNum: "0"
    };
  },
  mounted() {
    this.getList("", "", this.searchData.status);
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getList("", "", this.searchData.status);
        }
      },
      deep: true
    }
  },
  methods: {
    changePage() {
      this.pageData.currentPage = 1;
    },
    trunTime(row, column, cellValue) {
      return util.getdatetime(cellValue);
    },
    outPut(status) {
      let data = {
        source: 0,
        shopId: this.merchantId,
        name: this.searchData.name,
        serviceProvideName:this.searchData.serviceProvideName,
        status: status,
        registeStartTime: "",
        registeEndTime: "",
        pageNo: this.pageData.currentPage,
        pageSize: this.pageData.pageSize,
        certificateType: 0
      };
      if (this.searchData.applyTime) {
        data.registeStartTime = this.searchData.applyTime[0] + " 00:00:00";
        data.registeEndTime = this.searchData.applyTime[1] + " 23:59:59";
      }
      exportTrainRegisteLIst(data).then(res => {
        if (res.data == undefined) {
          let fileName = "报名列表.xlsx";
          fileDownload(res, fileName);
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    handleClick(event) {
      this.searchData = {
        name: "",
        certificateType: "",
        status: "0,2",
        applyTime: ""
      };
      this.tabNum = event.index;
      this.pageData.currentPage = 1;
      if (event.index == "0") {
        this.searchData.status = "0,2";
        this.getList("", "", "0,2");
      } else {
        this.searchData.status = "1";
        this.getList("", "", "1,3,4,5");
      }
    },
    search() {
      this.pageData.currentPage = 1;
      if (this.tabNum == "0") {
        this.getList("", "", "0,2");
      } else if(this.tabNum == "1"){
        this.getList("", "", "1,3,4,5");
      }
    },

    getList(pageNo, pageSize, status = this.searchData.status) {
      let data = {
        source: 0,
        shopId: this.merchantId,
        name: this.searchData.name,
        status: status,
        registeStartTime: "",
        registeEndTime: "",
        pageNo: this.pageData.currentPage,
        pageSize: this.pageData.pageSize,
        certificateType: this.searchData.certificateType,
         serviceProvideName:this.searchData.serviceProvideName

      };
      if (this.searchData.applyTime) {
        data.registeStartTime = this.searchData.applyTime[0] + " 00:00:00";
        data.registeEndTime = this.searchData.applyTime[1] + " 23:59:59";
      }
      trainRegisteLIst(data).then(res => {
        this.pageData.totalItems = res.data.total;
        this.tableData = res.data.list;
      });
    },
    toDetail(id, row) {
      util.routerTo("/training-center/reManagement/applyList/applyDetails", {
        id: id,
        row: row
      });
    },
    resetSearchData() {
      this.searchData = {
        name: "",
        certificateType: "",
        status: "0,2",
        applyTime: "",
        serviceProvideName:'',

      };
    },
    changeStatus(status, id) {
      let tipMessage = "是否确认通过该报名信息";
      if (status == 2) {
        tipMessage = "是否确认驳回该报名信息";
      }
      this.$confirm(tipMessage, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          registerEdit({
            id: id,
            status: status
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.pageData.currentPage = 1;
              this.getList("", "", "0,2");
            }
          });
        })
        .catch();
    },
    //创建图片
    getUrlBase64(url) {
      return new Promise(resolve => {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.crossOrigin = "Anonymous"; //允许跨域
        img.setAttribute("crossOrigin", "anonymous");
        console.log(img);
        img.src = url;
        img.onload = function() {
          console.log(url);
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0, img.width, img.height);
          let dataURL = canvas.toDataURL("image/jpeg");
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    //下载
    download(url, idNumber) {
      this.getUrlBase64(url).then(base64 => {
        let link = document.createElement("a");
        link.href = base64;
        link.download = idNumber;
        link.click();
      });
    },
    openUrl(url) {
      window.open(url);
    }
  }
};
</script>

<style scoped  lang="less">
.pages-certificate {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
}
.head {
  padding: 10px 15px;
}
.el-row {
  margin-bottom: 20px;
}
.el-select {
  margin: 0 10px;
  width: auto;
}
.el-input {
  margin: 0 10px;
  width: auto;
}
.el-date-editor--daterange.el-input__inner {
  width: 215px;
  margin: 0 10px;
}
.title {
  font-size: 14px;
}
</style>
